import React, { PureComponent } from 'react'
import { connect } from 'react-redux'
import { actionCreators } from './store'
import  Redirect   from 'react-router-dom'

import {
    LoginWrapper,
    LoginMain,
    LoginBtn
} from './style'
import { fromJS } from 'immutable';
class Login extends PureComponent {
    render () {
        const { login, loginStatus } = this.props;
        if ( !loginStatus ) {
            return (
                <LoginWrapper>
                    <LoginMain>
                        <input placeholder="用户名" ref={(input) => {this.acount = input}}/>
                        <input placeholder="密码" ref={(input) => {this.passWord = input}} />
                        <LoginBtn onClick={() => login(this.acount.value, this.passWord.value)}>登陆</LoginBtn>
                    </LoginMain>
                </LoginWrapper>
            )
        } else {
            return <Redirect to="/" />
        }
        
    }

    
};

const mapStateToProps = (state) => ({
    loginStatus: state.getIn(['login','login'])
});

const mapDispatchToProps = (dispatch) => ({
    login (acount, passWord) {
        dispatch(actionCreators.changeLogin(acount, passWord))
    }
});


export default connect(mapStateToProps, mapDispatchToProps)(Login)